<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义主题（与工作台保持一致） -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2563eb', // 统一主色调：蓝色
                        secondary: '#64748b', // 辅助色：中性灰
                        dark: '#1e293b',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类和动画 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .bg-glass {
                background: rgba(255, 255, 255, 0.9);
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
            }
            .animate-float {
                animation: float 6s ease-in-out infinite;
            }
            .input-focus {
                @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
            }
        }

        @keyframes float {
            0% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-15px) rotate(2deg); }
            100% { transform: translateY(0px) rotate(0deg); }
        }
    </style>
</head>
<body class="min-h-screen font-sans text-dark overflow-x-hidden bg-gradient-to-br from-slate-50 to-slate-100">
<!-- 背景装饰 -->
<div class="fixed inset-0 bg-[url('')] opacity-30 z-0"></div>

<!-- 装饰性圆形元素 -->
<div class="fixed top-20 -left-20 w-72 h-72 bg-primary/10 rounded-full blur-3xl animate-float"></div>
<div class="fixed bottom-20 -right-20 w-80 h-80 bg-primary/5 rounded-full blur-3xl animate-float" style="animation-delay: 2s;"></div>

<!-- 登录卡片容器 -->
<div class="relative z-10 min-h-screen flex items-center justify-center p-4 sm:p-6 lg:p-8">
    <!-- 登录卡片 -->
    <div class="w-full max-w-md">
        <!-- 品牌/系统名称（与工作台呼应） -->
        <div class="text-center mb-8">
            <h2 class="text-[clamp(1.8rem,5vw,2.3rem)] font-bold text-primary text-shadow">
                <i class="fa fa-book mr-2"></i>我的笔记系统
            </h2>
            <p class="text-secondary mt-2">请登录您的账号以继续</p>
        </div>

        <!-- 登录表单卡片（与工作台卡片风格统一） -->
        <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-slate-200 transition-all hover:shadow-xl">
            <!-- 表单内容 -->
            <form id="loginForm" class="p-6 sm:p-8">
                <!-- 用户名输入框 -->
                <div class="mb-5">
                    <label for="username" class="block text-sm font-medium text-slate-700 mb-1">用户名</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa fa-user text-slate-400"></i>
                        </div>
                        <input
                                type="text"
                                id="username"
                                name="username"
                                required
                                class="block w-full pl-10 pr-3 py-3 bg-slate-50 border border-slate-200 rounded-lg transition-all input-focus"
                                placeholder="请输入用户名"
                        >
                    </div>
                </div>

                <!-- 密码输入框 -->
                <div class="mb-6">
                    <div class="flex items-center justify-between mb-1">
                        <label for="password" class="block text-sm font-medium text-slate-700">密码</label>
                        <a href="#" class="text-sm text-primary hover:text-primary/80 transition-colors">忘记密码?</a>
                    </div>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa fa-lock text-slate-400"></i>
                        </div>
                        <input
                                type="password"
                                id="password"
                                name="password"
                                required
                                class="block w-full pl-10 pr-3 py-3 bg-slate-50 border border-slate-200 rounded-lg transition-all input-focus"
                                placeholder="请输入密码"
                        >
                    </div>
                </div>

                <!-- 验证码输入框 -->
                <div class="mb-6">
                    <label for="captcha" class="block text-sm font-medium text-slate-700 mb-1">验证码</label>
                    <div class="flex items-center space-x-3">
                        <input
                                type="text"
                                id="captcha"
                                name="captcha"
                                required
                                class="block w-1/2 pl-3 pr-3 py-3 bg-slate-50 border border-slate-200 rounded-lg transition-all input-focus"
                                placeholder="输入验证码"
                        >
                        <img src="/login-itheimaservlet/captcha"
                             onclick="this.src='/login-itheimaservlet/captcha?'+Math.random()"
                             class="h-12 rounded border border-slate-200 cursor-pointer hover:opacity-90 transition-opacity"
                             title="点击刷新">
                    </div>
                </div>

                <!-- 记住密码选项 -->
                <div class="flex items-center mb-6">
                    <div class="flex items-center h-5">
                        <input id="remember" type="checkbox" class="w-4 h-4 bg-white border border-slate-300 rounded focus:ring-primary/50">
                    </div>
                    <label for="remember" class="ml-2 text-sm text-slate-700">记住我的登录状态</label>
                </div>

                <!-- 登录按钮（与工作台按钮风格统一） -->
                <button id="loginBtn"
                        type="submit"
                        class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] shadow-md hover:shadow-primary/20 flex items-center justify-center"
                >
                    <span>登录系统</span>
                    <i class="fa fa-arrow-right ml-2"></i>
                </button>

                <!-- 分隔线 -->
                <div class="relative my-6">
                    <div class="absolute inset-0 flex items-center">
                        <div class="w-full border-t border-slate-200"></div>
                    </div>
                    <div class="relative flex justify-center text-sm">
                        <span class="px-2 bg-white text-slate-500">其他登录方式</span>
                    </div>
                </div>

                <!-- 社交登录选项 -->
                <div class="flex justify-center space-x-4">
                    <button type="button" class="w-11 h-11 rounded-full bg-slate-50 flex items-center justify-center text-[#07C160] hover:bg-white shadow-sm hover:shadow transition-all">
                        <i class="fa fa-weixin text-lg"></i>
                    </button>
                    <button type="button" class="w-11 h-11 rounded-full bg-slate-50 flex items-center justify-center text-[#12B7F5] hover:bg-white shadow-sm hover:shadow transition-all">
                        <i class="fa fa-qq text-lg"></i>
                    </button>
                    <button type="button" class="w-11 h-11 rounded-full bg-slate-50 flex items-center justify-center text-[#1DA1F2] hover:bg-white shadow-sm hover:shadow transition-all">
                        <i class="fa fa-twitter text-lg"></i>
                    </button>
                    <button type="button" class="w-11 h-11 rounded-full bg-slate-50 flex items-center justify-center text-[#333] hover:bg-white shadow-sm hover:shadow transition-all">
                        <i class="fa fa-github text-lg"></i>
                    </button>
                </div>
            </form>

            <!-- 底部注册提示（与工作台底部风格统一） -->
            <div class="bg-slate-50 px-6 py-4 text-center border-t border-slate-100">
                <p class="text-sm text-slate-600">
                    还没有账号?
                    <a href="register.html" class="font-medium text-primary hover:text-primary/80 transition-colors">立即注册</a>
                </p>
            </div>
        </div>

        <!-- 页脚版权信息 -->
        <div class="text-center mt-8 text-slate-500 text-sm">
            <p>© 2025 我的笔记系统 - 用技术记录生活</p>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

    // 在 login.html 中改进错误处理逻辑
    $('#loginBtn').click(function(e) {
        e.preventDefault();

        $.ajax({
            type: 'POST',
            url: '/login-itheimaservlet/login', // 确保URL正确
            data: {
                username: $('#username').val(),
                password: $('#password').val(),
                captcha: $('#captcha').val()
            },
            success: function(res) {
                let data;
                try {
                    data = JSON.parse(res);
                } catch (error) {
                    alert('服务器返回格式错误');
                    return;
                }
                if (data.status === 'adminsuccess') {
                    alert(data.message);
                    window.location.href = 'admin.html';
                } else if (data.status === 'usersuccess') {
                    alert(data.message);
                    window.location.href = 'dashboard.html';
                } else{
                    alert('输入错误');
                    window.location.href = 'login.html';
                }
            },
            error: function(xhr, status, error) {
                console.error('Server Error Details:', xhr.responseText);
                console.error('Status:', status);
                console.error('Error:', error);
                alert('登录请求失败: ' + (xhr.responseText || '服务器内部错误'));
            }
        });
    });

</script>
</body>
</html>